<template>
  <div>
    <div v-if="!PageProperty.ErrorType&&Data_Bind.Data.length>=0">
      <el-table
        border
        stripe
        size="small"
        ref="multipleTable"
        :data="Data_Bind.Data"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-dblclick = "handleRowDblclick"
      >
        <el-table-column v-if="datajson.Config.type == 'selection' && Data_Bind.Data.length>0" type="selection" width="55"></el-table-column>
        <el-table-column
          ref="optionTableColumn"
          v-for="item in datajson.Index"
          :key="item.IndexID"
          :prop="PageProperty.OrderIsID?item.IndexID:item.IndexName"
          :label="item.IndexText"
          :render-header="TableRenderHeader"
          :fixed="isNaN(item.IsReadOnly)? item.IsReadOnly:Boolean(item.IsReadOnly)"
          :sortable="Boolean(item.IsOrder)?'custom':false"
          :show-overflow-tooltip="true"
          :min-width="item.Width"
        >
          <!-- 汇总行 -->
          <el-table-column
            ref="optionTableSumColumn"
            v-if="Data_Bind.SumData.length>0"
            :label="formatfn(Data_Bind.SumData[0][item.TotalIndexName],item.Genre,true,Data_Bind.SumData[0])"
            :render-header="TableRenderHeader"
            :show-overflow-tooltip="true"
            :min-width="item.Width"
          >
            <label
              slot-scope="scope"
              v-html="formatfn(scope.row[item.IndexName],item.Genre,false,scope.row)"
            ></label>
          </el-table-column>
          <!-- 列表 -->
          <label
            v-if="Data_Bind.SumData.length==0"
            slot-scope="scope"
            v-html="formatfn(scope.row[item.IndexName],item.Genre,false,scope.row)"
          ></label>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div
        v-if="Data_Bind.Paging.Count>0"
        class="cina-page-wrap"
        style="height:initial; margin:0; padding:5px;"
      >
        <div class="cina-page" style="text-align:right;">
          <el-pagination
            @current-change="TablePagingFn"
            :current-page="Data_Bind.Paging.Index"
            :page-size="Data_Bind.Paging.Size"
            :page-count="Data_Bind.Paging.Count"
            :pager-count="11"
            :total="Data_Bind.Paging.RecordCount"
            :disabled="Data_Bind.Paging.Disabled"
            layout="total,prev,pager,next"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div v-else class="table-attention" v-html="PageProperty.ErrorInfo"></div>
  </div>
</template>
<script>
export default {
  props: { datajson: [Object, Array], formatfn: [Function] },
  data () {
    return {
      name: 'OptTable',
      PageProperty: {//页面属性
        TableHeight: this.datajson.Config.Height || (document.body.offsetHeight - 260),
        TableWrapHeight: '',
        Loading: false, OrderIsID: false,
        ErrorType: null, ErrorInfo: 'page error'
      },
      Data_Bind: {//表格绑定数据
        Index: [], SumData: [], Data: [],
        Paging: { Index: 0, Size: 0, Count: 0, RecordCount: 0, Disabled: false },
        Order: '', OrderType: '',
      }
    };
  },
  watch: {
    'datajson.Config.Loading': { handler () { this.PageProperty.Loading = this.datajson.Config.Loading; } },
    'datajson.Config.ErrorType': { handler () { this.SetDefaultInfo(); } },
    'datajson.Data': { handler () { this.SetDefaultInfo(); }, deep: true }
  },
  created () {
    console.log(this.datajson)
    this.PageProperty.ErrorType = this.datajson.Config.ErrorType || null, this.PageProperty.ErrorInfo = this.datajson.Config.ErrorInfo || 'page error';
    this.Data_Bind = {
      Index: [], SumData: [], Data: [],
      Paging: { Index: 0, Size: 0, Count: 0, RecordCount: 0 },
      Order: '', OrderType: '',
    };
    if (this.datajson.Config.ErrorType == null && this.datajson.Data.length > 0) {
      this.Data_Bind = {
        Index: this.datajson.Index || [], SumData: this.datajson.SumData || [], Data: this.datajson.Data || [],
        Paging: { Index: this.datajson.Config.PagingIndex || 0, Size: this.datajson.Config.PagingSize || 0, Count: this.datajson.Config.PagingCount || 0, RecordCount: this.datajson.Config.RecordCount || 0, Disabled: false },
        Order: this.datajson.Config.Order || '', OrderType: this.datajson.Config.OrderType || '',
      };
      console.log(this.Data_Bind)
    }
  },
  methods: {
    //设置默认数据
    SetDefaultInfo () {
      this.PageProperty.ErrorType = this.datajson.Config.ErrorType;
      this.PageProperty.ErrorInfo = this.datajson.Config.ErrorInfo || 'page error';
      this.Data_Bind = {
        Index: [], SumData: [], Data: [],
        Paging: { Index: 0, Size: 0, Count: 0, RecordCount: 0 },
        Order: '', OrderType: '',
      };
    },
    //格式化表头
    TableRenderHeader (h, { column }) {
      return column.label;
    },
    //处理多选回调
    handleSelectionChange (val) {
      this.$emit("handleSelectionChange", val);
    },
    //当某一行被双击时会触发该事件
    handleRowDblclick(row, column, event){
      this.$emit("handleRowDblclick", row, column, event);
    },
    //分页事件
    TablePagingFn (pagingIndex) {
      this.$emit("pagingfn", pagingIndex);
    },
  }
}
</script>
<style lang="scss" scoped>
</style>
